<template>
  <div class="splitDiv" :style="{height:height}">
    <Split v-model="split">
      <div slot="left" class="split-pane">
        <div id="mapView" :style="{height:height}"></div>
        <AreaMeasurement2D :mapView="mapView"></AreaMeasurement2D>
      </div>
      <div slot="right" class="split-pane">
        <div id="sceneView" :style="{height:height}"></div>
      </div>
    </Split>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import $ from "jquery";
import AreaMeasurement2D from "./AreaMeasurement2D.vue";

export default {
  data() {
    return {
      split: 0.5,
      mapView: null
    };
  },
  computed: {
    height: function() {
      return $(document).height() + "px";
    }
  },
  components: {
    AreaMeasurement2D
  },
  methods: {
    creatMap() {
      let self = this;
      const options = {
        url: process.env.VUE_APP_arcgis_api_url
      };
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/Basemap",
          "esri/layers/TileLayer",
          "esri/views/SceneView"
        ],
        options
      )
        .then(([Map, MapView, Basemap, TileLayer, SceneView]) => {
          const ChinaOnlineCommunity = new TileLayer({
            url: process.env.VUE_APP_basemap_ChinaOnlineCommunity
          });
          const basemap_ChinaOnlineCommunity = new Basemap({
            baseLayers: [ChinaOnlineCommunity],
            id: "basemap_ChinaOnlineCommunity",
            title: "彩色中文含兴趣点版中国基础地图"
          });
          const map = new Map({
            basemap: basemap_ChinaOnlineCommunity
          });
          const mapView = new MapView({
            container: "mapView",
            map: map,
            center:[116.40,39.91],
            zoom:12
          });
          const sceneView = new SceneView({
            container: "sceneView",
            map: map
          });
          self.mapView = mapView;
          return {
            mapView: mapView,
            sceneView: sceneView
          };
        })
        .then(results => {
          let self = this;
          function displayCoor(e) {
            self.$Notice.info({
              title: "坐标",
              desc: `经度：${e.mapPoint.longitude.toFixed(2)}<br>纬度：${e.mapPoint.latitude.toFixed(2)}`
            });
          }
          results.mapView.on("click", function(e) {
            displayCoor(e);
          });
          results.sceneView.on("click", function(e) {
            displayCoor(e);
          });
          return results.mapView;
        });
    }
  },
  mounted() {
    this.creatMap();
  }
};
</script>

<style scoped>
#mapView {
  width: 100%;
}
.splitDiv {
  border: 1px solid #dcdee2;
}
</style>